<template>
  <q-card flat>
    <q-tabs dense v-model="tab" class="text-primary" align="left">
      <q-tab name="home" label="基本信息" />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-btn
        flat
        icon="refresh"
        @click="
          () => {
            initUserInfo();
          }
        "
      >
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>

  <q-tab-panels v-model="tab" animated>
    <q-tab-panel name="home">
      <div class="row q-gutter-md">
        <div>
          <q-avatar size="100px" v-viewer>
            <q-img
              :src="userInfo.avatar"
              :ratio="1 / 1"
              errorSrc="/images/default-avatar.png"
            />
          </q-avatar>
          <div
            @click="
              () => {
                dialogFlag = true;
              }
            "
            class="q-pt-sm text-subtitle2 text-blue cursor-pointer"
          >
            点击修改头像
          </div>
        </div>
      </div>
      <div>
        <div class="row q-gutter-md">
          <div class="col">
            <q-input
              v-model="userInfo.username"
              maxlength="16"
              counter
              :rules="[(val) => val.length > 0 || '不可为空']"
              type="text"
              label="用户名"
            />
          </div>

          <div class="col">
            <q-input
              v-model="userInfo.homeLink"
              maxlength="100"
              counter
              type="text"
              label="主页地址"
            />
          </div>
        </div>

        <div class="row q-gutter-md">
          <div class="col">
            <q-input
              v-model.number="userInfo.age"
              type="number"
              label="年龄"
              :rules="[
                (val) => (val > 0 && val < 120) || '年龄只能为1~120之间',
              ]"
            />
          </div>

          <div class="col">
            <q-input
              maxlength="100"
              counter
              v-model="userInfo.summary"
              type="textarea"
              label="简介"
              placeholder="一句话介绍一下自己~~"
            />
          </div>
        </div>
      </div>

      <div class="row items-center q-gutter-md">
        <q-btn
          :loading="loadBtn"
          color="primary"
          label="确认更改"
          @click="sureEdit"
        />
        <q-btn
          :loading="loadBtn"
          label="重置"
          @click="
            () => {
              initUserInfo();
            }
          "
        />
      </div>

      <div class="q-pt-sm row justify-around"></div>
    </q-tab-panel>
  </q-tab-panels>
</template>

<script setup lang="ts">
import { settingChangeUser } from 'src/service/api';
import { initUserInfo, dialogFlag, userInfo } from './shared';
import { useYuan } from 'src/use';
import { ref } from 'vue';

const { Ok } = useYuan();
const loadBtn = ref(false);

const tab = ref('home');
const sureEdit = async () => {
  loadBtn.value = true;
  const { error } = await settingChangeUser(userInfo.value);
  if (!error) {
    initUserInfo();
    Ok('用户编辑成功');
  }
  loadBtn.value = false;
};
</script>

<style scoped></style>
